<template>
  <div class="base-panels">
    <anchorLink :links="links"></anchorLink>
    <section :id="'c'+(index+1)" v-for="(item,index) in qualList">
      <h2 class="title2">{{ item.type }} <i>{{ item.total }}</i></h2>
      <qualityTable :source="item.data" />
    </section>
    <section id="cf">
      <h2 class="title2">安全生产许可证 <i>{{ safePage.total }}</i></h2>
      <Table
          :columns="safeColumns"
          :row-key="(record,index) => index"
          :data-source="safeList"
          :pagination="safePage"
          :loading="safeLoading"
          @change="safeChangeHandler"
          bordered
      >
        <template #indexSlot="{ index }">{{index+1}}</template>
      </Table>
    </section>
  </div>
</template>

<script lang="ts">

import { defineComponent, inject, onMounted, reactive,ref, toRefs } from 'vue';
import { Table  } from 'ant-design-vue';
import {getCompanyQualApi, getCompanySafeApi} from '/@/api/company';
import { anchorLink } from "/@/components/linkComponent/index";
import { parseTime } from '/@/utils';
import qualityTable from './qualityTable.vue';


const safeColumns = [
  { title: '序号', dataIndex: 'index', width: 70, align: 'center', slots: ({ customRender: 'indexSlot' }) },
  { title: '安许证书号', dataIndex: 'safetyNo', width: 250 },
  { title: '许可范围', dataIndex: 'permitScope' },
  { title: '发证日期', dataIndex: 'approveDate', width: 120, customRender: ({ record })=> parseTime(record.approveDate) },
  { title: '有效期截止', dataIndex: 'safetyEdate', width: 120, customRender: ({ record })=> parseTime(record.safetyEdate) },
  { title: '发证机关', dataIndex: 'safetyApproveUnitName' }
]

export default defineComponent({
  components: { Table , anchorLink ,  qualityTable},
  setup() {
    const links = ref()
    const corpId = inject('corpId') as string;
    const qualList = ref([]) ;


    const safeConfig = reactive({
      key: 'safe',
      safeColumns,
      safeList: [],
      safeLoading: false,
      safePage: {
        total: 0,
        current: 1,
        hideOnSinglePage:true
      }
    })

    const initLink = data =>{    //锚点链接数据绑定
      let type:any = [];
      data.forEach((item,index)=>{
        type.push({
          key: '#c'+(index+1),
          title: item.type
        })
      })
      type.push({
        key: '#cf',
        title: '安全生产许可证'
      })
      links.value = type
    }

    const qualChangeHandler = () => {
      getCompanyQualApi( 'qual',{corpId}).then(({ data, success }) => {
        if(success) {
          initLink(data);
          qualList.value = data;
        }
      })
    }

    const safeChangeHandler = (pagination) => {
      let { current, pageSize } = pagination;
      let { safeLoading, safeList, safePage } = toRefs(safeConfig);
      safeLoading.value = true;
      getCompanySafeApi({corpId, current, size: pageSize}).then(({ data, success }) => {
        if(success) {
          let { records, current, total } = data;
          safeList.value = records;
          safeLoading.value = false;
          safePage.value = { current, total };
        }
      })
    }

    const init = () => {
      qualChangeHandler();
      safeChangeHandler({current: 1});
    }

    onMounted(init)

    return {
      qualList,
      ...toRefs(safeConfig),
      safeChangeHandler,
      links
    }
  }

})
</script>

<style lang="less" scoped>
.ant-tabs {
  margin-top: -60px;

  ::v-deep(.ant-tabs-nav-scroll) {
    display: flex;
    flex-direction: row-reverse;
  }
}

::v-deep(.ant-pagination) {
  margin-bottom: 0 !important;
}

.base-panels{
  >section{
    padding-top: 16px;
    margin-bottom: 10px;
  }
}

</style>
